<template>
  <!--
  直接选择用户进行预审申请
  -->
  <div>
    <ant-modal
      modalWidth="900"
      modalHeight="750"
      :visible="open"
      modal-title="客户费用确认"
      :adjust-size="true"
      @cancel="cancel"
    >
      <a-form-model
        ref="form"
        :model="form"
        :rules="rules"
        slot="content"
        layout="vertical"
      >
        <a-row :gutter="32" style="width: 70%; left: 10%; margin-top: -10px">
          <a-col :span="24">
            <a-row :gutter="24">
              <a-col :span="16" style="margin-bottom: 15px">
                <div style="display: flex; flex-direction: row">
                  <span
                    style="
                      width: 5px;
                      height: 22px;
                      background-color: coral;
                      display: block;
                    "
                  ></span>
                  <span
                    style="
                      margin-left: 5px;
                      height: 22px;
                      line-height: 22px;
                      font-size: 16px;
                      font-weight: 600;
                    "
                    >基本信息</span
                  >
                </div>
              </a-col>
            </a-row>
            <a-row :gutter="24" style="left: 15%">
              <a-col :span="12">
                <a-form-model-item label="客户姓名" prop="customerName">
                  <a-input
                    v-model="form.customerName"
                    placeholder="请选择客户"
                    disabled
                    @search="handleOnSearchCustomer"
                  >
                  </a-input>
                </a-form-model-item>
              </a-col>

              <a-col :span="12">
                <a-form-model-item label="电话" prop="phone">
                  <a-input
                    v-model="form.phone"
                    placeholder="请输入电话"
                    disabled
                  />
                </a-form-model-item>
              </a-col>
            </a-row>
            <a-row :gutter="24" style="left: 15%">
              <a-col :span="12">
                <a-form-model-item label="申请金额（元）" prop="yxEdu">
                  <a-input-number
                    v-model="form.yxEdu"
                    :min="0"
                    style="width: 100%"
                    placeholder="请输入申请金额（元）"
                    disabled
                  />
                </a-form-model-item>
              </a-col>
              <a-col :span="12">
                <a-form-model-item label="客服" prop="servcieUserName">
                  <a-input
                    v-model="form.servcieUserName"
                    placeholder="请选择客服"
                    style="width: 100%"
                    disabled
                  >
                  </a-input>
                </a-form-model-item>
              </a-col>
            </a-row>
            <a-row :gutter="32">
              <a-col :span="24" style="margin-bottom: 15px">
                <div style="display: flex; flex-direction: row">
                  <span
                    style="
                      width: 5px;
                      height: 22px;
                      background-color: coral;
                      display: block;
                    "
                  ></span>
                  <span
                    style="
                      margin-left: 5px;
                      height: 22px;
                      line-height: 22px;
                      font-size: 16px;
                      font-weight: 600;
                    "
                    >产品信息</span
                  >
                </div>
              </a-col>
            </a-row>
            <a-row :gutter="24" v-if="proOne" style="left: 15%">
              <a-col :span="8">
                <a-form-model-item label="服务机构（一）" prop="orgType">
                  <a-select
                    placeholder="请选择服务机构"
                    v-model="form.orgType"
                    :getPopupContainer="
                      (triggerNode) => {
                        return triggerNode.parentNode || document.body;
                      }
                    "
                    style="width: 100%"
                    allow-clear
                    @change="handleGetProductInfo"
                    disabled
                  >
                    <a-select-option
                      v-for="(d, index) in orgTypeOptions"
                      :key="index"
                      :value="d.dictValue"
                      >{{ d.dictLabel }}</a-select-option
                    >
                  </a-select>
                </a-form-model-item>
              </a-col>
              <a-col :span="8">
                <a-form-model-item label="产品名称（一）">
                  <a-select
                    placeholder="请选择产品"
                    v-model="form.productId"
                    :getPopupContainer="
                      (triggerNode) => {
                        return triggerNode.parentNode || document.body;
                      }
                    "
                    style="width: 100%"
                    allow-clear
                    @select="handleChooseProduct"
                    disabled
                  >
                    <a-select-option
                      v-for="d in productList"
                      :key="d.productName"
                      :value="d.id"
                      >{{ d.productName }}</a-select-option
                    >
                  </a-select>
                </a-form-model-item>
              </a-col>
              <a-col :span="8">
                <a-form-model-item label="是否通过">
                  <a-radio-group v-model="form.isTgOne">
                    <a-radio value="1"> 通过 </a-radio>
                    <a-radio value="2"> 未通过 </a-radio>
                  </a-radio-group></a-form-model-item
                >
              </a-col>
            </a-row>
            <a-row :gutter="24" v-if="proTwo" style="left: 15%">
              <a-col :span="8">
                <a-form-model-item label="服务机构（二）">
                  <a-select
                    placeholder="请选择服务机构"
                    v-model="form.orgTypeTwo"
                    :getPopupContainer="
                      (triggerNode) => {
                        return triggerNode.parentNode || document.body;
                      }
                    "
                    style="width: 100%"
                    allow-clear
                    @change="handleGetProductInfoTwo"
                    disabled
                  >
                    <a-select-option
                      v-for="(d, index) in orgTypeOptions"
                      :key="index"
                      :value="d.dictValue"
                      >{{ d.dictLabel }}</a-select-option
                    >
                  </a-select>
                </a-form-model-item>
              </a-col>
              <a-col :span="8">
                <a-form-model-item label="产品名称（二）">
                  <a-select
                    placeholder="请选择产品"
                    v-model="form.productIdTwo"
                    :getPopupContainer="
                      (triggerNode) => {
                        return triggerNode.parentNode || document.body;
                      }
                    "
                    style="width: 100%"
                    allow-clear
                    @select="handleChooseProductTwo"
                    disabled
                  >
                    <a-select-option
                      v-for="d in productListTwo"
                      :key="d.productName"
                      :value="d.id"
                      >{{ d.productName }}</a-select-option
                    >
                  </a-select>
                </a-form-model-item>
              </a-col>
              <a-col :span="8">
                <a-form-model-item label="是否通过">
                  <a-radio-group v-model="form.isTgTwo">
                    <a-radio value="1"> 通过 </a-radio>
                    <a-radio value="2"> 未通过 </a-radio>
                  </a-radio-group></a-form-model-item
                >
              </a-col>
            </a-row>
            <a-row :gutter="24" v-if="proThree" style="left: 15%">
              <a-col :span="8">
                <a-form-model-item label="服务机构（三）" prop="orgTypeThree">
                  <a-select
                    placeholder="请选择服务机构"
                    v-model="form.orgTypeThree"
                    :getPopupContainer="
                      (triggerNode) => {
                        return triggerNode.parentNode || document.body;
                      }
                    "
                    style="width: 100%"
                    allow-clear
                    @change="handleGetProductInfoThree"
                    disabled
                  >
                    <a-select-option
                      v-for="(d, index) in orgTypeOptions"
                      :key="index"
                      :value="d.dictValue"
                      >{{ d.dictLabel }}</a-select-option
                    >
                  </a-select>
                </a-form-model-item>
              </a-col>
              <a-col :span="8">
                <a-form-model-item label="产品名称（三）">
                  <a-select
                    placeholder="请选择产品"
                    v-model="form.productIdThree"
                    :getPopupContainer="
                      (triggerNode) => {
                        return triggerNode.parentNode || document.body;
                      }
                    "
                    style="width: 100%"
                    allow-clear
                    @select="handleChooseProductThree"
                    disabled
                  >
                    <a-select-option
                      v-for="d in productListThree"
                      :key="d.productName"
                      :value="d.id"
                      >{{ d.productName }}</a-select-option
                    >
                  </a-select>
                </a-form-model-item>
              </a-col>
              <a-col :span="8">
                <a-form-model-item label="是否通过" prop="isTgThree">
                  <a-radio-group v-model="form.isTgThree">
                    <a-radio value="1"> 通过 </a-radio>
                    <a-radio value="2"> 未通过 </a-radio>
                  </a-radio-group></a-form-model-item
                >
              </a-col>
            </a-row>

            <a-row :gutter="32">
              <a-col :span="24" style="margin-bottom: 15px">
                <div style="display: flex; flex-direction: row">
                  <span
                    style="
                      width: 5px;
                      height: 22px;
                      background-color: coral;
                      display: block;
                    "
                  ></span>
                  <span
                    style="
                      margin-left: 5px;
                      height: 22px;
                      line-height: 22px;
                      font-size: 16px;
                      font-weight: 600;
                    "
                    >服务费用</span
                  >
                </div>
              </a-col>
            </a-row>
            <a-row :gutter="24" style="left: 15%">
              <a-col :span="12">
                <a-form-model-item
                  label="客户是否同意服务费用"
                  prop="agreeServiceAmount"
                >
                  <a-radio-group
                    default-value="0"
                    v-model="form.agreeServiceAmount"
                    style="width: 100%"
                  >
                    <a-radio value="0"> 同意 </a-radio>
                    <a-radio value="1"> 不同意 </a-radio>
                  </a-radio-group></a-form-model-item
                >
              </a-col>

              <a-col :span="12" v-if="form.agreeServiceAmount != '1'">
                <a-form-model-item label="服务费" prop="serviceAmount">
                  <a-input-number
                    v-model="form.serviceAmount"
                    :min="0"
                    style="width: 100%"
                    placeholder="请输入服务费用"
                    :formatter="(value) => `${value}元`"
                    :parser="(value) => value.replace('元', '')"
                  />
                </a-form-model-item>
              </a-col>

              <a-col :span="24">
                <a-form-model-item label="费用说明" prop="serviceAmountRemark">
                  <a-input
                    type="textarea"
                    v-model="form.serviceAmountRemark"
                    placeholder="请输入费用说明"
                  />
                </a-form-model-item>
              </a-col>
            </a-row>
            <a-row :gutter="32">
              <a-col :span="24" style="margin-bottom: 15px">
                <div style="display: flex; flex-direction: row">
                  <span
                    style="
                      width: 5px;
                      height: 22px;
                      background-color: coral;
                      display: block;
                    "
                  ></span>
                  <span
                    style="
                      margin-left: 5px;
                      height: 22px;
                      line-height: 22px;
                      font-size: 16px;
                      font-weight: 600;
                    "
                    >其他信息</span
                  >
                </div>
              </a-col>
            </a-row>
            <a-row :gutter="24" style="left: 15%">
              <a-col :span="24">
                <a-form-model-item label="备注" prop="remark">
                  <a-input
                    type="textarea"
                    v-model="form.remark"
                    placeholder="请输入备注"
                  />
                </a-form-model-item>
              </a-col>
            </a-row>
            <a-row :gutter="32">
              <a-col :span="24" style="margin-bottom: 15px">
                <div style="display: flex; flex-direction: row">
                  <span
                    style="
                      width: 5px;
                      height: 22px;
                      background-color: coral;
                      display: block;
                    "
                  ></span>
                  <span
                    style="
                      margin-left: 5px;
                      height: 22px;
                      line-height: 22px;
                      font-size: 16px;
                      font-weight: 600;
                    "
                    >进件信息</span
                  >
                </div>
              </a-col>
            </a-row>
            <a-row :gutter="32" style="left: 15%">
              <a-col :span="8">
                <!-- <a-form-model-item label="资方"> -->
                <a-radio-group v-model="form.zifangType" button-style="solid">
                  <a-radio-button
                    v-for="(dict, index) in zifangTypeOptions"
                    :key="index"
                    :value="dict.dictValue"
                  >
                    {{ dict.dictLabel }}
                  </a-radio-button>
                </a-radio-group>
                <!-- </a-form-model-item> -->
              </a-col>
            </a-row>

            <a-row :gutter="32" v-if="form.zifangType" style="left: 15%">
              <a-col :span="8">
                <a-form-model-item label="车辆类型">
                  <a-input
                    v-model="customerForm.carType"
                    placeholder="请输入车辆类型"
                  >
                  </a-input>
                </a-form-model-item>
              </a-col>
              <a-col :span="8">
                <a-form-model-item label="车架号">
                  <a-input
                    v-model="customerForm.chassisNo"
                    placeholder="请输入车架号"
                  />
                </a-form-model-item>
              </a-col>
              <a-col :span="8">
                <a-form-model-item label="公里数">
                  <a-input
                    v-model="customerForm.mileage"
                    placeholder="请输入公里数"
                  />
                </a-form-model-item>
              </a-col>

              <a-col :span="8">
                <a-form-model-item label="是否在本人名下">
                  <a-radio-group
                    defaultValue="0"
                    v-model="customerForm.isBelong"
                    button-style="solid"
                  >
                    <a-radio-button value="0"> 是 </a-radio-button>
                    <a-radio-button value="1"> 否 </a-radio-button>
                  </a-radio-group>
                </a-form-model-item>
              </a-col>
              <a-col :span="8">
                <a-form-model-item label="是否有贷款">
                  <a-radio-group
                    defaultValue="0"
                    v-model="customerForm.isLoan"
                    button-style="solid"
                  >
                    <a-radio-button value="0"> 是 </a-radio-button>
                    <a-radio-button value="1"> 否 </a-radio-button>
                  </a-radio-group>
                </a-form-model-item>
              </a-col>
              <a-col :span="8">
                <a-form-model-item label="抵押情况">
                  <a-input
                    v-model="customerForm.mortgageStatus"
                    placeholder="请输入抵押情况"
                  />
                </a-form-model-item>
              </a-col>
              <a-col :span="8">
                <a-form-model-item label="车辆贷款情况">
                  <a-input
                    v-model="customerForm.loanStatus"
                    placeholder="请输入车辆贷款情况"
                  />
                </a-form-model-item>
              </a-col>
              <a-col :span="8">
                <a-form-model-item label="真实姓名">
                  <a-input
                    v-model="customerForm.realName"
                    placeholder="请输入真实姓名"
                  />
                </a-form-model-item>
              </a-col>

              <a-col :span="8">
                <a-form-model-item label="银行名称">
                  <a-input
                    v-model="customerForm.bankName"
                    placeholder="请输入银行名称"
                  />
                </a-form-model-item>
              </a-col>

              <a-col :span="8">
                <a-form-model-item label="银行卡号">
                  <a-input
                    v-model="customerForm.bankNum"
                    placeholder="请输入银行卡号"
                  />
                </a-form-model-item>
              </a-col>

              <a-col :span="8">
                <a-form-model-item label="身份证有效期开始日期">
                  <a-date-picker
                    v-model="customerForm.idCardStartTime"
                    value-format="YYYY-MM-DD"
                    placeholder="选择日期"
                  />
                </a-form-model-item>
              </a-col>

              <a-col :span="8">
                <a-form-model-item label="身份证有效期结束日期">
                  <a-date-picker
                    v-model="customerForm.idCardEndTime"
                    value-format="YYYY-MM-DD"
                    placeholder="选择日期"
                  />
                </a-form-model-item>
              </a-col>
            </a-row>
          </a-col>
        </a-row>
      </a-form-model>
      <template slot="footer">
        <!-- <a-button type="primary" @click="submitForm" :loading="isFanganSave">
          保存
        </a-button> -->

        <a-button
          type="primary"
          @click="handleJinjianConfirmBill('6')"
          :loading="isFanganSave"
        >
          费用确认
        </a-button>
        <a-button
          type="danger"
          @click="handleJinjianConfirmBillRefuse('-6')"
          :loading="refuseLoading"
        >
          费用不接受
        </a-button>
        <a-button
          class="confirmAgain"
          @click="handleJinjianConfirmAgain('-13')"
          :loading="loading"
        >
          重新提交方案
        </a-button>

        <a-button @click="cancel"> 取消 </a-button>
      </template>
    </ant-modal>
    <a-modal
      :visible="visibleShowUser"
      title="选择客户"
      v-if="visibleShowUser"
      @cancel="visibleShowUser = false"
      @ok="visibleShowUser = false"
      width="900px"
      :dialog-style="{ top: '20px', heigth: '800px' }"
    >
      <a-card :bordered="false" class="table-card">
        <user-list @getCustomer="getCustomerInfo"></user-list>
      </a-card>
    </a-modal>
    <a-modal
      :visible="chooseUserVisible"
      title="选择客服"
      v-if="chooseUserVisible"
      width="55%"
      @ok="chooseUserVisible = false"
      @cancel="chooseUserVisible = false"
      :dialog-style="{ top: '10px' }"
    >
      <change-user
        @getUser="handleManualShare"
        :isCheckBox="true"
        :isKefu="1"
      />
    </a-modal>
  </div>
</template>
<script>
import BizJinjianInfoAddForm from "./BizJinjianInfoForm";
export default {
  ...BizJinjianInfoAddForm,
};
</script>

<style scoped lang="less">
.confirmAgain {
  color: #fff;
  background-color: #e6a23c;
  border-color: #e6a23c;
}
</style>
